<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>

    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        .ol-mouse-position {
            top: 95%;
            right: 8px;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥
        var mousePositionControl = null;
 
        function init() {
             //加载天地图瓦片图层数据
             var TiandiMap_vect = new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false
                    })
            });
            
            var TiandiMap_vectcia =new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk
                    })
            });
            //初始化地图容器
            var map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: [12000000, 4000000],  //地图初始中心点
                    maxZoom: 28,         //最大瓦片显示级数
                    minZoom: 1,          //最小瓦片显示级数
                    zoom: 6              //地图初始显示级数
                }),
                layers:[TiandiMap_vect,TiandiMap_vectcia]
            });
            
            mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                // projection: 'EPSG:3857'
            });
            map.addControl(mousePositionControl);
        }
        
        function DispView(cordinateSys)
        {
            if(cordinateSys!="")
            {
                if(cordinateSys=="EPSG:4326")
                {
                    mousePositionControl.setProjection(ol.proj.get("EPSG:4326"));
                }
                else if(cordinateSys=="EPSG:3857")
                {
                    mousePositionControl.setProjection(ol.proj.get("EPSG:3857"));
                }
            }
        }
       
        
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>

    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
         <div id='dataSourceMenuID'  class="optmain"  status="unactive" onclick="switchMenuStatus(this,'menu1')">
             <span></span><i class="menuGroup">坐标系</i><em></em>
         </div>
     </div>
 </div>
 <div id="menu1" class="menuStrip" style='display:none' >
     <ul  class="menuItems">
         <li   onclick="DispView('EPSG:4326')"><span class="item1"></span><i >经纬度</i>
         </li>
         <li  onclick="DispView('EPSG:3857')"><span class="item1"></span><i >Web墨卡托</i>
         </li>
     </ul>
  </div>
 <script>
    function switchMenuStatus(div, menuitemFrameID) {
        var temDivs = document.getElementsByClassName('optmain');
        if (temDivs.length > 0) {
            for (var i = 0; i < temDivs.length; i++) {
                if (temDivs[i] === div) {
                    var status = div.getAttribute("status");
                    if (status == "unactive") {
                        div.setAttribute("status", "active");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "active";
                        tem_ems[0].className = "active";

                        //显示菜单项
                        DisplayMenuItem(true, menuitemFrameID);

                    }
                    else {
                        div.setAttribute("status", "unactive");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";

                        //隐藏菜单项
                        DisplayMenuItem(false, menuitemFrameID);
                    }
                }
                else {
                    var status = temDivs[i].getAttribute("status");
                    if (status == "active") {
                        temDivs[i].setAttribute("status", "unactive");
                        var tem_spans = temDivs[i].getElementsByTagName("span");
                        var tem_ems = temDivs[i].getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";
                    }
                }
            }
        }
    }

    function DisplayMenuItem (isDisplay, iframeID) {
        var menuItemFrame = document.getElementById(iframeID);
        if (menuItemFrame != null) {
            if (isDisplay) {
                var temDivs = document.getElementsByClassName('menuStrip');
                if (temDivs.length > 0) {
                    for (var i = 0; i < temDivs.length; i++) {
                        if (temDivs[i] != menuItemFrame) {
                            temDivs[i].style.display = "none";
                        }
                    }   
                }
                menuItemFrame.style.display = "";
            }
            else {
                menuItemFrame.style.display = "none";
            }
        }
    };
    
 </script>
</body>

</html>